import { computed, defineComponent, reactive, ref } from "vue";
import style from "./index.module.less";
import Field from "@/components/Field";
import { Button, Col, Picker, Popup, Row } from "vant";
import PickerHeader from "@/components/PickerHeader";
import { IFormItem, IFormTypeData } from "../../types";
import { getSize } from "@/command/apiTool";
import { IFormPopCheck } from "./types";
export default defineComponent({
  name: "select-view",
  props: {
    value: {
      type: String,
      default: "",
    },
    item: {
      type: Object as () => IFormItem,
      default: () => {
        return {};
      },
    },
    typeData: {
      type: Array as () => IFormTypeData[],
      default: () => [],
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const getValue = () => {
      if (props.value && typeof props.value == "string") {
        return new Set(props.value.split(","));
      } else {
        return new Set([]);
      }
    };
    const showModal = ref(false);
    const select = ref(getValue());
    return () => {
      function renderModal() {
        const item = props.item as IFormItem & IFormPopCheck;
        const buttons = [
          {
            name: "取消",
            bg: "white",
            border: "1px solid #CCCCCC",
            textColor: "#4D4D4D",
            onClick: () => {
              showModal.value = false;
            },
          },
          {
            name: "确认",
            bg: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
            textColor: "white",
            onClick: () => {
              showModal.value = false;
              emit("change", Array.from(select.value).join(","));
            },
          },
        ];
        const onSelectItem = (item: IFormTypeData) => {
          if (select.value.has(item.value as never)) {
            select.value.delete(item.value as never);
          } else {
            select.value.add(item.value as never);
          }
        };

        return (
          <Popup
            v-model:show={showModal.value}
            round={true}
            position="bottom"
            style={{ padding: getSize(15), paddingTop: getSize(20) }}
          >
            <div class={"flex items-center justify-center"}>
              {item.popTitle || item.label}
            </div>
            <Row class="flex-wrap flex " gutter={20}>
              {item.typeData.map((e) => {
                const isFocus = select.value.has(e.value);
                return (
                  <Col span={12}>
                    <div
                      class={[
                        style.button,
                        isFocus && style["button-focus"],
                        "h-[38px]",
                      ]}
                      onClick={() => onSelectItem(e)}
                    >
                      {e.label}
                    </div>
                  </Col>
                );
              })}
            </Row>
            <div class="my-[15px] w-full h-[1px] bg-[#F5F5F5]" />
            <div class="flex items-center justify-between mt-[15px]">
              {buttons.map((e) => {
                return (
                  <div
                    onClick={e.onClick}
                    class="w-[165px] h-[40px] flex items-center justify-center rounded-full"
                    style={{
                      color: e.textColor,
                      background: e.bg,
                      border: e.border,
                    }}
                  >
                    {e.name}
                  </div>
                );
              })}
            </div>
          </Popup>
        );
      }
      const renderField = () => {
        return (
          <Field
            name={props.value ? "已选择" : "请选择"}
            onClick={() => (showModal.value = true)}
            isLink={true}
          />
        );
      };
      return (
        <div>
          {renderField()}
          {renderModal()}
        </div>
      );
    };
  },
});
